@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}
//rem换算函数
@function r($px){
    @return ($px/40)*1rem; 
}
#luckyDraw{
    width: 400px;
    height: 100vh;
    background-position: 0% 0%;
    position: absolute;
    left: 55%;
    margin-left: -300px;
    overflow: hidden;
    max-height: 812px;
    background-image: url(../img/luckyDraw/ld_bg.jpg);
    background-size: cover;
    div>img{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-user-select: none;
        pointer-events:none;
    }
    //logo
    #logo{
        img{
            width: 50%;
            top: 8%;
        }
    }
    //红包
    #redBag{
        transform-origin: center center; 
        height: 100%;
        img{
            width: 80%;
            top: 15%;
        }
    }
    //红色logo
    #redLogo{
        img{
            width: 25%;
            top: 80%;
        }
    }
    //提示
    #tips{
        color: white;
        font-size: r(6);
        position: absolute;
        left: 50%;
        top: 85%;
        transform: translateX(-50%);
    }
    //发光的圆
    #round{
        width: r(1000);
        height: r(1000);
        position: absolute;
        left: -15%;
        transform: translateX(-50%);
        top: 10%;
        border-radius: 50%;
        background:radial-gradient(circle,rgba(255,255,255,1),rgba(255,255,255,0));
        z-index: 5;
        opacity: 0;
    }
    //中奖提示
    #luckyTips{
        color: white;
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translateX(-50%);
        z-index: 6;
        #tips1{
            color:rgb(255,271,159);
            font-size: r(12);
            letter-spacing:r(3);
            text-align: center;
            margin-bottom: 5px;
        }
    }
    //中奖图片
    #gift{
        width: 50%;
        position: absolute;
        left: 50%;
        top: 28%;
        transform: translateX(-50%);
        z-index: 7;
        img{
            width: 120%;
        }
    }
    //邀请好友
    #shareBtn{
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translateX(-50%);
        background-color: rgba(255,0,0,0); 
        border: 1px solid rgb(255,271,159);
        color: rgb(255,271,159);
    }
    //打开红包的类
    .redBagPlay{
        animation: redBagRun 1.5s;
    }
    //圆发光的类
    .roundPlay{
        animation: roundRun 1s;
    }
    //打开红包的动画
    @keyframes redBagRun{
        0%{}
        10%{transform: rotateZ(-5deg) scale(0.9,0.9)}
        14%{transform: rotateZ(5deg) scale(1.2,1.2)}
        21%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        28%{transform: rotateZ(5deg) scale(1.2,1.2)}
        35%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        42%{transform: rotateZ(5deg) scale(1.2,1.2)}
        49%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        56%{transform: rotateZ(5deg) scale(1.2,1.2)}
        63%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        70%{transform: rotateZ(5deg) scale(1.2,1.2)}
        77%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        84%{transform: rotateZ(5deg) scale(1.2,1.2)}
        91%{transform: rotateZ(-5deg) scale(1.2,1.2)}
        100%{transform: rotateZ(0deg) scale(1,1)}
    }
    //打开红包的动画
    @keyframes roundRun{
        0%{transform:scale(0,0);opacity: 0;}
        100%{transform:scale(2,2);opacity:1;}
    }
    
    //模态框
    #myModal{
        margin: 0;
        padding: 0;
        width: 400px;
        height: 100vh;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .modal-dialog{
            margin: 0;
        }
        //模态框内容
        .modal-content{
            width: 400px;
            height: 100vh;
            margin-top: 20vh;
            background-color: rgba(0,0,0,0);
            border: none;
            box-shadow: none;
            //模态框主体
            .modal-body{
                padding:0 ;
                margin: 0;
                position: relative;
                width: 100%;
                height: 100%;
                img{
                    width: 40%;
                }
                &>img:first-of-type{
                    position: absolute;
                    top: -10%;
                    left: 63%;
                }
                &>img:last-of-type{
                    position: absolute;
                    top: 40%;
                    left: 50%;
                }
            }
        }
    }
}


@media (max-width:768px){
    #luckyDraw{
        width:100%;
        left: 0%;
        margin-left: 0px;
        background-size: cover;
    }
    #luckyDraw #tips{
        font-size: r(24);
    }
    #luckyDraw #luckyTips #tips1{
        font-size: r(36);
        letter-spacing:r(9)
    }
     #FlyingBear #myModal{
        width: r(700);
    }
    #FlyingBear #myModal .modal-content{
        width: r(700);
    }
    #FlyingBear #myModal .modal-content .modal-body{
        width: r(700);
    }
}